import React, { useState } from "react";
import ReactDOM from "react-dom/client";
import { CheckCircleOutline } from "antd-mobile-icons";
import { Button, Space } from "antd-mobile";
import "antd-mobile/bundle/style.css";
import { GreatJoyModal } from "../src/index.tsx";
import "../src/index.scss";

/**
 * DEMO盒子
 * @param param0
 * @returns
 */
const DemoBlock: React.FC<{ title: string; children: React.ReactNode }> = ({
	title,
	children,
}) => (
	<div style={{ margin: "16px 0" }}>
		<h3>{title}</h3>
		{children}
	</div>
);

const App: React.FC = () => {
	const [visible, setVisible] = useState<boolean>(false);
	return (
		<>
			<DemoBlock title="基础用法">
				<Space direction="vertical" block>
					<Button block onClick={() => setVisible(true)}>
						最简单的弹窗
					</Button>
					<GreatJoyModal
						visible={visible}
						title="提示"
						content={
							<>
								<div>这是一个自定义弹窗</div>
							</>
						}
						cancelText="取消"
						confirmText="确定"
						onConfirm={() => {
							setVisible(false);
						}}
						onCancel={() => {
							setVisible(false);
						}}
					/>
				</Space>
			</DemoBlock>
			<DemoBlock title="指令式用法">
				<Space direction="vertical" block>
					<Button
						block
						onClick={() => {
							GreatJoyModal.show({
								icon: <CheckCircleOutline color="#FF6600" />,
								content: "whhhhhhh",
								onConfirm: () => {
									console.log(123123);
								},
							});
						}}>
						指令式
					</Button>
				</Space>
			</DemoBlock>
		</>
	);
};

const root = ReactDOM.createRoot(document.getElementById("root")!);
root.render(<App />);
